<template>
  <div>
    <el-button type="primary" @click="add">添加辅助治疗</el-button>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="辅助治疗" prop="item_name" />
      <el-table-column label="数量" prop="item_qty" />
      <el-table-column label="价格" prop="item_price" />
      <el-table-column label="操作" prop="address">
        <template slot-scope="scope">
          <el-button @click="delt(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :before-close="handleClose"
      title="提示"
      :visible.sync="dialogVisible"
      width="60%"
    >
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item
          v-for="(items, index) in lsit"
          :key="index"
          name="1"
          title="辅助治疗"
        >
          <el-button
            style="margin-left: 90%; margin-bottom: 10px"
            @click.native="delItemData(index)"
          >
            删除
          </el-button>

          <el-form ref="form" label-width="130px" :model="form">
            <!-- <el-form-item label="检查包名称">
              <el-input
                v-model="items.report_name"
                placeholder="请选择"
                style="60%"
              />
            </el-form-item> -->
            <el-form-item label="辅助治疗">
              <el-select v-model="items.goods_attr_id" placeholder="请选择">
                <el-option
                  v-for="item in goodsList"
                  :key="item.goods_id"
                  :label="item.goods_name"
                  :value="item.goods_attr_id"
                  @click.native="goodsChange(index, item.goods_attr_id)"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="数量">
              <el-input
                v-model="items.goods_qty"
                placeholder="请选择"
                style="width: 400px"
              />
            </el-form-item>
          </el-form>
        </el-collapse-item>
      </el-collapse>
      <el-button style="margin-left: 50%; margin-top: 10px" @click="addaux">
        添加辅助治疗
      </el-button>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import { therapy, saveTherapy, delTherapy } from '@/api/reservation'

  import { getGoodsList } from '@/api/public'

  // import { getUserList } from '@/api/public'

  export default {
    props: {
      seeList: {
        type: Object,
        required: true,
      },
      pdata: {
        type: Object,
        required: true,
      },
    },
    data() {
      return {
        dialogVisible: false,
        tableData: [],
        lsit: [
          {
            goods_attr_id: '',
            goods_qty: '',
          },
        ],
        form: {},
        value: '',
        goodsList: [],
        tag: [],
        tagValue: '',
        activeNames: ['1'],
      }
    },

    watch: {
      pdata() {
        this.init()
        this.lsit = [
          {
            goods_attr_id: '',
            goods_qty: '',
          },
        ]
        this.goodsList = []

        // console.log(val)
        // console.log(value)
      },
    },
    mounted() {
      this.init()
      this.handleChange()
    },
    beforeMount() {},
    methods: {
      handleChange() {},
      delt(e) {
        console.log(e)
        const data = {
          consume_id: e.id,
        }
        delTherapy(data).then(() => {
          // console.log(e)
          this.init()
        })
      },
      submit() {
        const data = {
          id: this.seeList.id,
          item: JSON.stringify(this.lsit),
        }
        console.log(data)
        saveTherapy(data).then(() => {
          this.init()
          this.dialogVisible = false
        })
      },
      add() {
        this.dialogVisible = true
        this.lsit = [
          {
            goods_attr_id: '',
            goods_qty: '',
          },
        ]
      },
      init() {
        therapy(this.pdata).then((e) => {
          // this.tableData = e.data.menu_result
          const tableData = []
          e.data.menu_result.forEach((j) => {
            j.item.forEach((i) => {
              // i.extend_field = j.extend_field
              tableData.push(i)
            })
          })
          this.tableData = tableData
          if (e.data.menu_type == 'type') {
            const data = {
              goods_type: e.data.menu_key,
            }
            getGoodsList(data).then((e) => {
              this.goodsList = e.data
            })
          } else {
            const data = {
              method_id: e.data.menu_value,
            }
            getGoodsList(data).then((e) => {
              this.goodsList = e.data
            })
          }
        })

        console.log(this.objs)
      },

      goodsChange(i, e) {
        const goodsList = JSON.parse(JSON.stringify(this.goodsList))
        goodsList.forEach((j) => {
          if (j.goods_attr_id == e) {
            this.lsit[i].goods_id = j.goods_id
            this.lsit[i].goods_name = j.goods_name
            this.lsit[i].goods_attr_name = j.goods_attr_name
            this.lsit[i].goods_price = j.goods_price
            this.lsit[i].delivery_method = j.delivery_method
            this.lsit[i].express_fee = j.express_fee
            this.lsit[i].type_id = j.type_id
            this.lsit[i].method_id = j.method_id
          }
        })
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },

      delItemData(index) {
        this.lsit.splice(index, 1)
      },
      addaux() {
        this.lsit.push({
          goods_attr_id: '',
          goods_qty: '',
        })
      },
      tagClick(e) {
        console.log(e)
        this.tagValue = e.id
        this.tableData = e.item
      },
    },
  }
</script>

<style scoped>
  table.tftable,
  table.table-count {
    font-size: 12px;
    color: #333333;
    width: 100%;
    border-width: 1px;
    border-collapse: collapse;
  }

  table.table-count th,
  table.table-count td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: center;
  }

  table.tftable th,
  table.tftable td {
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #e4e4e4;
    text-align: left;
    text-align: center;
  }

  .tftable {
    margin-left: 30px;
    margin-bottom: 10px;
    margin-top: 10px;
  }
  table.tftable tr:hover {
    background: #c3ecff;
  }
  .tftable > thead > tr:hover {
    background: white;
  }
</style>
